<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商家管理</el-breadcrumb-item>
      <el-breadcrumb-item>审核列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <!--工具条-->
        <el-form
          :inline="true"
          :model="queryinfo"
          class="toolbar"
          label-position="right"
          label-width="80px"
        >
          <el-row>
            <el-form-item label="手机号">
              <el-input v-model="queryinfo.queryString" maxlength="11"></el-input>
            </el-form-item>

            <el-form-item label="订单状态">
              <el-select v-model="queryinfo.queryType" placeholder="请选择" clearable>
                <el-option
                  v-for="item in isAgainOrder"
                  :label="item.name"
                  :key="item.status"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label>
              <el-button @click="searchOrderInfo" type="primary" size="medium">查询</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <el-table :data="orderlist" style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column label="姓名" prop="name" width="100"></el-table-column>
          <el-table-column label="电话" prop="mobile" width="100"></el-table-column>
          <el-table-column label="身份证正面照" width="100" prop="storePhoto">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height:60px;margin-bottom:15px;"
                :src="scope.row.identityFace"
                :preview-src-list="[scope.row.identityFace]"
              ></el-image>
              <!-- <el-popover placement="right" width="400" trigger="click">
                
                <div style="display:flex;align-items:center;justify-content:center;">
                  <img :src="scope.row.storePhoto" alt style="width:20rem;height:auto;" />
                </div>

                <el-button type="primary" size="mini" slot="reference">点击查看</el-button>
              </el-popover>-->
            </template>
          </el-table-column>
          <!-- prop="storePhoto"-->
          <el-table-column label="身份证反面照" width="100">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height:60px;margin-bottom:15px;"
                :src="scope.row.identityBack"
                :preview-src-list="[scope.row.identityBack]"
              ></el-image>
              <!-- <el-popover placement="right" width="400" trigger="click">
                <div
                  style="display:flex;align-items:center;justify-content:center;overscroll:scroll;"
                >
                  <img :src="scope.row.businessLicense" alt style="width:20rem;height:auto;" />
                </div>

                <el-button type="primary" size="mini" slot="reference">点击查看</el-button>
              </el-popover>-->
            </template>
          </el-table-column>

          <el-table-column label="申请状态" prop="status">
            <template slot-scope="scope">
              <div
                style
              >{{scope.row.status==0?"审核中":scope.row.status==1?"审核通过":scope.row.status==2?"审核失败":scope.row.status==3?"已拒绝":""}}</div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <!-- <el-table-cloumn label="操作">{{status}}</el-table-cloumn> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                v-loading.fullscreen.lock="fullscreenLoading"
                @click="buquanConfirmSub(1,scope)"
                v-if="scope.row.status==0"
              >同意</el-button>
              <el-button
                type="danger"
                size="mini"
                @click="buquanConfirmSub(0,scope)"
                v-if="scope.row.status==0"
              >拒绝</el-button>
            </template>
            <!-- <template slot-scope="scope" v-if="scope.row.status==0">
              <el-button type="primary" size="mini" @click="confirmReplay(scope)">同意</el-button>
              <el-button type="danger" size="mini" @click="refuseReplay(scope)">拒绝</el-button>
            </template>-->
          </el-table-column>
          <!-- <el-table-column label="操作" v-if="status==0">
            <template slot-scope="scope" v-if="scope.row.status==5 || scope.row.status==6">
              <el-button type="primary" size="mini" @click="getBuquanInfo(scope)">查看补全信息</el-button>
            </template>
            <template slot-scope="scope" v-if="scope.row.status==0">
              <el-button type="primary" size="mini" @click="confirmReplay(scope)">同意</el-button>
              <el-button type="danger" size="mini" @click="refuseReplay(scope)">拒绝</el-button>
            </template>
          </el-table-column>-->
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.pageNo"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryinfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </el-card>

    <el-dialog title="拒绝操作" :visible.sync="changDialogVisibleo" width="40%">
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入内容"
        v-model="jujueContent"
      ></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changDialogVisibleo=false">取 消</el-button>
        <el-button type="primary" @click="changFormSubmit" :loading="addFormLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isAgainOrder: [
        {
          name: "请选择",
          status: "",
        },
        {
          name: "审核中",
          status: 0,
        },
        {
          name: "审核通过",
          status: 1,
        },
        {
          name: "已拒绝",
          status: 2,
        },
        {
          name: "已注销",
          status: 3,
        },
      ],
      queryinfo: {
        queryType: "", // 0 审核中 1 正常 2审核失败 3拒绝/注销
        pageNo: 1,
        pageSize: 10,
      },
      orderlist: [],
      total: "",
      changForm: {
        content: "",
      },
      changDialogVisibleo: false,
      dialogVisible: true,
      sindex: null,
      dataInfo: {},
      form: {
        token: "", //七牛token
        Url: "", //获取上传路径
        domain: "", //上传路径 二级
      },
      buquanBtn: false,
      maskType: 1,

      jujueContent: "",
      fullscreenLoading: false,
    };
  },
  created() {
    this.getOrderList();
    this.getQnToken();
  },
  methods: {
    buquanConfirmSub(type, scope) {
      this.jujueContent = "";
      this.dataInfo = scope;
      //type 0 拒绝 1同意
      if (type == 0) {
        this.changDialogVisibleo = true;
      } else {
        this.$confirm("是否同意商家入驻补全信息审核", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //queryType 1 同意 2 拒绝   queryId
            this.changDialogVisibleo = false;
            this.fullscreenLoading = true;
            let params = {
              queryId: this.dataInfo.row.id,
              queryType: 1,
            };
            this.$http
              .post("/manage/lawCoin/passLawCoin", params)
              .then((res) => {
                this.fullscreenLoading = false;
                if (res.data.status == 1) {
                  this.$message({
                    type: "success",
                    message: "已同意",
                  });
                  this.getOrderList();
                } else {
                  this.$message.error(res.data.message);
                }
              });
          })
          .catch(() => {});
      }
    },

    async getQnToken() {
      const { data: res } = await this.$http.post(
        "/manage/userFile/qiNiuUpload",
        {}
      );
      console.log(res.data.token);
      this.form.token = res.data.token;
      this.form.domain = res.data.domain;
      this.form.Url = res.data.upload_url;
    },
    handleSizeChange(e) {
      console.log(e);
      this.queryinfo.pageSize = e;
      this.getOrderList();
    },
    handleCurrentChange(newPage) {
      this.queryinfo.pageNo = newPage;
      this.getOrderList();
    },
    searchOrderInfo() {
      this.queryinfo.pageNo = 1;
      this.getOrderList();
    },

    getOrderList() {
      // if (this.queryinfo.queryId == "") {
      //   this.queryinfo.queryId = 0;
      // }
      this.$http
        .post("/manage/lawCoin/lawCoinList", this.queryinfo)
        .then((res) => {
          console.log("商家列表", res.data);
          this.orderlist = res.data.data.list;
          this.total = res.data.data.total;
        });
    },
    changFormSubmit() {
      if(!this.jujueContent){
        this.$message({
          message: '请输入拒绝原因',
          type: 'warning'
        });
        return;
      }
      this.changDialogVisibleo = false;
      console.log(this.dataInfo);
      this.fullscreenLoading = true;
      // setTimeout(() => {
      //   this.fullscreenLoading = false;
      // }, 3000);
      // return;
      let params = {
        queryId: this.dataInfo.row.id,
        queryType: 2,
        queryString:this.jujueContent
      };
      this.$http.post("/manage/lawCoin/passLawCoin", params).then((res) => {
        this.fullscreenLoading = false;
        if (res.data.status == 1) {
          this.$message({
            type: "success",
            message: "已拒绝",
          });
          this.getOrderList();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
};
</script>
<style lang="less" >
.itemUl {
  list-style-type: none;
}
.itemUl .itemli {
  max-width: 300px;
}
.demo-table-expand {
  font-size: 0;
  // height: 600px;
  background-color: rgb(243, 242, 242);
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.base-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
}
.name-color {
  color: #666666;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.base-border {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #eeeeee;
}
</style>
